<template>
  <!-- 账号修改页面 -->
  <div class="editAccount">
    <!-- 账号修改卡片部分 -->
    <el-card shadow="never" class="editAccountCard" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>修改账号</span>
      </div>
      <el-form ref="form" :model="form" label-width="100px">
        <!-- 原账号显示 -->
        <el-form-item label="原账号：">{{ form.mobile }} </el-form-item>
        <el-form-item label="原验证码：">
          <!-- 原来账号 获取验证码 -->
          <div>
            <el-input v-model="submitForm.oldCode" placeholder="请输入验证码" size="small" style="width:300px" />
            <el-button type="primary" style="margin-left:30px" :disabled="disable" :class="{ codeGeting:isGeting }" size="mini" @click="getVerifyCode">{{ getCode }}</el-button>
          </div>
        </el-form-item>
        <el-form-item label="新账号：">
          <!-- 输入新的账号 -->
          <div>
            <el-input v-model="submitForm.newMobile" placeholder="请输入新账号" size="small" style="width:300px" />
          </div>
        </el-form-item>
        <el-form-item label="新验证码：">
          <!-- 新的账号 获取验证码 -->
          <div>
            <el-input v-model="submitForm.newCode" placeholder="请输入验证码" size="small" style="width:300px" />
            <el-button type="primary" style="margin-left:30px" :disabled="newDisable" :class="{ codeGeting:newIsGeting }" size="mini" @click="newGetVerifyCode">{{ newGetCode }}</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="submit">提交</el-button>
          <el-button type="default" size="medium" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import引入的组件需要注入到对象中才能使用
import { getMemberInfoApi } from '@/api/login'
import { changeMobileOldApi, changeMobileNewApi, updatePasswordMobileByOldMobileApi } from '@/api/myMessage/editMessage'
export default {
  components: {},
  data() {
    // 这里存放数据
    return {
      // 验证码部分
      getCode: '获取验证码', // 验证码按钮默认文字
      isGeting: false, //
      count: 60, // 倒计时60s
      disable: false, // 控制倒计时按钮 是否可用
      // 新的验证码按钮参数
      newGetCode: '获取验证码',
      newIsGeting: false, //
      newCount: 60,
      newDisable: false,
      form: { // 用户信息表单

      },
      submitForm: { // 用户提交表单
        newMobile: '', // 新手机号
        newCode: '', // 新手机号验证码
        oldCode: '' // 旧手机号验证码
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.memberInfo()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 获取用户信息
    memberInfo() {
      getMemberInfoApi().then(res => {
        if (res.code === 200) {
          this.form = res.data
        } else {
          this.$message.error('获取用户信息失败！')
        }
      })
    },
    reset() { // 重置表单
      this.submitForm.oldCode = ''
      this.submitForm.newMobile = ''
      this.submitForm.newCode = ''
    },

    submit() { // 提交修改账号表单
      updatePasswordMobileByOldMobileApi(this.submitForm.newMobile, this.submitForm.oldCode, this.submitForm.newCode).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改账号成功！'
          })
          this.memberInfo()
        } else {
          this.$message.error({
            message: '修改账号失败'
          })
        }
      })
    },
    // 给原来账号发送验证码
    getVerifyCode() {
      changeMobileOldApi(this.form.mobile).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '验证码已发送！',
            type: 'success' })
        } else {
          this.$message.error({
            message: `发送失败！` + res.msg
          })
        }
      })
      // 第一个验证码倒计时按钮
      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 60
          clearInterval(countDown)
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000)
    },

    // 给新账号发送验证码
    newGetVerifyCode() {
      changeMobileNewApi(this.submitForm.newMobile).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '验证码已发送！'
          })
        } else {
          this.$message.error({
            message: `发送失败！` + res.msg
          })
        }
      })
      // 第二个验证码倒计时按钮
      var countDown = setInterval(() => {
        if (this.newCount < 1) {
          this.newIsGeting = false
          this.newDisable = false
          this.newGetCode = '获取验证码'
          this.newCount = 60
          clearInterval(countDown)
        } else {
          this.newIsGeting = true
          this.newDisable = true
          this.newGetCode = this.newCount-- + 's后重发'
        }
      }, 1000)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.editAccount{//账号修改样式
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f0f2f5;
  .editAccountCard{//账号修改卡片样式
    margin: 30px;
  }
}
</style>
